import React, { useState } from 'react'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import { useLocation, useNavigate } from 'react-router-dom'

const Tabbars = () => {

    let location = useLocation()
    let navigate = useNavigate()
    let [change, setChange] = useState(location.pathname)

    let tabbarlist = [
        { id: 1, path: '/home', title: '首页', icon: <HomeO /> },
        { id: 2, path: '/fenlei', title: '分类', icon: <FriendsO /> },
        { id: 3, path: '/miquan', title: '米圈', icon: <Search /> },
        { id: 4, path: '/car', title: '购物车', icon: <SettingO /> },
        { id: 5, path: '/my', title: '我的', icon: <FriendsO /> }
    ]


    const changeHandle = (path:any) => {
        //console.log(path);
        setChange(path)
        navigate(path)
    }

    return (
        <div className='demo-tabbar'>
            <Tabbar value={change} onChange={changeHandle}>
                {
                    tabbarlist.map(item => {
                        return (
                            <Tabbar.Item key={item.id} icon={item.icon} name={item.path}>
                                {item.title}
                            </Tabbar.Item>
                        )
                    })
                }

            </Tabbar>
        </div>
    )
}

export default Tabbars
